<template>
    <el-row>
        <el-col :span="24" style="padding: 40px; box-sizing:border-box">
            <el-card class="box-card">
                <template #header>
                    <div class="card-header" style="display: flex;justify-content:space-between">
                        <span>图谱展示</span>
                        <el-button class="button" type="primary">编辑图谱</el-button>
                    </div>
                </template>
                <div class="graph-container" :style="`height:${viewHeight - 300}px;width:${viewwidth}px`"></div>
                <template #footer>
                    <el-button type="success">
                        图谱共享
                    </el-button>
                </template>
            </el-card>
        </el-col>
    </el-row>
</template>
<script  setup>
import { defineComponent, reactive, ref, toRefs, onMounted, watch } from "vue";
import G6 from '@antv/g6';
let viewHeight = ref(window.innerHeight);
let viewwidth = ref(window.innerWidth);
const data = {
    nodes: [
        {
            "id": "9376",
            "name": "人员",
            "label": "陈凤"
        },
        {
            "id": "59337",
            "name": "机构",
            "label": "西北农林科技大学旱区农业水土工程教育部重点实验室"
        },
        {
            "id": "9376",
            "name": "人员",
            "label": "陈凤"
        },
        {
            "id": "1065306",
            "name": "机构",
            "label": "江西省水泰工程检测有限公司"
        },
        {
            "id": "9377",
            "name": "人员",
            "label": "杨华"
        },
        {
            "id": "887183",
            "name": "机构",
            "label": "贵州贵安置业投资有限公司"
        },
        {
            "id": "9377",
            "name": "人员",
            "label": "杨华"
        },
        {
            "id": "1063694",
            "name": "机构",
            "label": "中国石油长庆油田分公司"
        },
        {
            "id": "9377",
            "name": "人员",
            "label": "杨华"
        },
        {
            "id": "1108848",
            "name": "机构",
            "label": "山西省煤炭工业厅资源地质局"
        },
        {
            "id": "9377",
            "name": "人员",
            "label": "杨华"
        },
        {
            "id": "1262692",
            "name": "机构",
            "label": "怀柔区水务局"
        },
        {
            "id": "9377",
            "name": "人员",
            "label": "杨华"
        },
        {
            "id": "1271604",
            "name": "机构",
            "label": "浏阳经开区投资发展有限公司"
        },
        {
            "id": "9377",
            "name": "人员",
            "label": "杨华"
        },
        {
            "id": "1287785",
            "name": "机构",
            "label": "重庆师范大学三峡文化与社会发展研究院"
        },
        {
            "id": "9377",
            "name": "人员",
            "label": "杨华"
        },
        {
            "id": "1287802",
            "name": "机构",
            "label": "重庆师范大学历史与文博学院"
        },
        {
            "id": "9377",
            "name": "人员",
            "label": "杨华"
        },
        {
            "id": "1294936",
            "name": "机构",
            "label": "中南大学功能材料化学研究所"
        },
        {
            "id": "9380",
            "name": "人员",
            "label": "鄂竟平"
        },
        {
            "id": "964862",
            "name": "机构",
            "label": "水利部"
        },
        {
            "id": "9381",
            "name": "人员",
            "label": "陈杰"
        },
        {
            "id": "884994",
            "name": "机构",
            "label": "南京大学地球科学系"
        },
        {
            "id": "9381",
            "name": "人员",
            "label": "陈杰"
        },
        {
            "id": "1072153",
            "name": "机构",
            "label": "南京航空航天大学能源和动力学院"
        },
        {
            "id": "9381",
            "name": "人员",
            "label": "陈杰"
        },
        {
            "id": "1081109",
            "name": "机构",
            "label": "中国建筑科学研究院有限公司"
        },
        {
            "id": "9381",
            "name": "人员",
            "label": "陈杰"
        },
        {
            "id": "1082410",
            "name": "机构",
            "label": "淮安市人民政府"
        },
        {
            "id": "9381",
            "name": "人员",
            "label": "陈杰"
        },
        {
            "id": "1098214",
            "name": "机构",
            "label": "宁夏中宁发电有限公司"
        },
        {
            "id": "9381",
            "name": "人员",
            "label": "陈杰"
        },
        {
            "id": "1102218",
            "name": "机构",
            "label": "浙江省杭州市余杭区林业水利局"
        },
        {
            "id": "9381",
            "name": "人员",
            "label": "陈杰"
        },
        {
            "id": "1257118",
            "name": "机构",
            "label": "海南立昇净水科技实业有限公司"
        },
        {
            "id": "9381",
            "name": "人员",
            "label": "陈杰"
        },
        {
            "id": "1260236",
            "name": "机构",
            "label": "温州市堤塘管理处"
        },
        {
            "id": "9381",
            "name": "人员",
            "label": "陈杰"
        },
        {
            "id": "1263390",
            "name": "机构",
            "label": "辽宁省高速公路管理局营口管理处"
        },
        {
            "id": "9381",
            "name": "人员",
            "label": "陈杰"
        },
        {
            "id": "1292212",
            "name": "机构",
            "label": "新疆交通建设管理局昌吉管理处"
        },
        {
            "id": "72",
            "name": "模型实体",
            "label": "EasyDHM模型"
        },
        {
            "id": "57719",
            "name": "机构",
            "label": "武汉大学水资源与水电工程科学国家重点实验室"
        },
        {
            "id": "72",
            "name": "模型实体",
            "label": "EasyDHM模型"
        },
        {
            "id": "1052140",
            "name": "人员",
            "label": "吴梦琪"
        },
        {
            "id": "75",
            "name": "模型实体",
            "label": "条件亚正态分布模型"
        },
        {
            "id": "886606",
            "name": "机构",
            "label": "中国气象科学研究院灾害天气国家重点实验室"
        },
        {
            "id": "75",
            "name": "模型实体",
            "label": "条件亚正态分布模型"
        },
        {
            "id": "1052011",
            "name": "人员",
            "label": "赵琳娜"
        },
        {
            "id": "63084",
            "name": "模型实体",
            "label": "改进图论与水文模拟方法的河网水系连通性评价模型"
        },
        {
            "id": "57584",
            "name": "机构",
            "label": "河海大学水利水电学院"
        },
        {
            "id": "63084",
            "name": "模型实体",
            "label": "改进图论与水文模拟方法的河网水系连通性评价模型"
        },
        {
            "id": "988896",
            "name": "人员",
            "label": "高玉琴"
        },
        {
            "id": "1559109",
            "name": "模型实体",
            "label": "S-W模型"
        },
        {
            "id": "886056",
            "name": "机构",
            "label": "北京师范大学水科学研究院水沙科学教育部重点实验室"
        },
        {
            "id": "1559109",
            "name": "模型实体",
            "label": "S-W模型"
        },
        {
            "id": "965032",
            "name": "人员",
            "label": "赵捷"
        },
        {
            "id": "1559112",
            "name": "模型实体",
            "label": "SCS模型"
        },
        {
            "id": "1067268",
            "name": "机构",
            "label": "江苏省气象服务中心"
        },
        {
            "id": "1559112",
            "name": "模型实体",
            "label": "SCS模型"
        },
        {
            "id": "1492149",
            "name": "人员",
            "label": "张顾"
        },
        {
            "id": "1559112",
            "name": "模型实体",
            "label": "SCS模型"
        },
        {
            "id": "8954",
            "name": "机构",
            "label": "江苏省水文水资源勘测局"
        },
        {
            "id": "1559112",
            "name": "模型实体",
            "label": "SCS模型"
        },
        {
            "id": "1555956",
            "name": "人员",
            "label": "栾承梅"
        },
        {
            "id": "1559117",
            "name": "模型实体",
            "label": "SIMHYD模型"
        },
        {
            "id": "1556044",
            "name": "机构",
            "label": "重庆400700"
        },
        {
            "id": "1559117",
            "name": "模型实体",
            "label": "SIMHYD模型"
        },
        {
            "id": "1556043",
            "name": "机构",
            "label": "西南大学资源环境学院 重庆400700"
        },
        {
            "id": "1559117",
            "name": "模型实体",
            "label": "SIMHYD模型"
        },
        {
            "id": "59485",
            "name": "机构",
            "label": "西南大学资源环境学院"
        },
        {
            "id": "1559117",
            "name": "模型实体",
            "label": "SIMHYD模型"
        },
        {
            "id": "1509289",
            "name": "人员",
            "label": "蔡文君"
        },
        {
            "id": "1559120",
            "name": "模型实体",
            "label": "耦合模型"
        },
        {
            "id": "885384",
            "name": "机构",
            "label": "安徽省气象培训中心"
        },
        {
            "id": "1559120",
            "name": "模型实体",
            "label": "耦合模型"
        },
        {
            "id": "885419",
            "name": "人员",
            "label": "刘惠民"
        },
        {
            "id": "1559142",
            "name": "模型实体",
            "label": "RCCC-WBM模型"
        },
        {
            "id": "1556101",
            "name": "机构",
            "label": "南京水利科学研究院水文水资源与水利工程科学国家重点实验室"
        },
        {
            "id": "1559142",
            "name": "模型实体",
            "label": "RCCC-WBM模型"
        },
        {
            "id": "964871",
            "name": "人员",
            "label": "王国庆"
        },
        {
            "id": "1559149",
            "name": "模型实体",
            "label": "PDM模型"
        },
        {
            "id": "1555638",
            "name": "机构",
            "label": "南京信息工程大学大气科学学院"
        },
        {
            "id": "45",
            "name": "模型区域",
            "label": "BTOPMC模型_西充河流域"
        },
        {
            "id": "1555618",
            "name": "流域",
            "label": "西充河流域"
        },
        {
            "id": "47",
            "name": "模型区域",
            "label": "S-W模型_黑河流域"
        },
        {
            "id": "1553709",
            "name": "流域",
            "label": "黑河流域"
        },
        {
            "id": "73",
            "name": "模型区域",
            "label": "SWAT模型_白莲河流域"
        },
        {
            "id": "1561365",
            "name": "流域",
            "label": "白莲河流域"
        },
        {
            "id": "76",
            "name": "模型区域",
            "label": "SCS模型_黑林流域"
        },
        {
            "id": "1561354",
            "name": "流域",
            "label": "黑林流域"
        },
        {
            "id": "63208",
            "name": "模型区域",
            "label": "SWAT模型_屯溪流域"
        },
        {
            "id": "1561196",
            "name": "流域",
            "label": "屯溪流域"
        },
        {
            "id": "976742",
            "name": "模型区域",
            "label": "新安江模型_瓦赫什河流域"
        },
        {
            "id": "1561325",
            "name": "流域",
            "label": "瓦赫什河流域"
        },
        {
            "id": "976762",
            "name": "模型区域",
            "label": "煤矿采空区特殊下垫面水文模型_汾河水库流域"
        },
        {
            "id": "1555865",
            "name": "流域",
            "label": "汾河水库流域"
        },
        {
            "id": "1552460",
            "name": "模型区域",
            "label": "GR模型_赣江流域"
        },
        {
            "id": "1553673",
            "name": "流域",
            "label": "赣江流域"
        },
        {
            "id": "1559113",
            "name": "模型区域",
            "label": "HBV水文模型_巴塘河流域"
        },
        {
            "id": "1555966",
            "name": "流域",
            "label": "巴塘河流域"
        },
        {
            "id": "1559116",
            "name": "模型区域",
            "label": "GISMOD模型_黑河流域"
        },
        {
            "id": "1553709",
            "name": "流域",
            "label": "黑河流域"
        },
        {
            "id": "1559118",
            "name": "模型区域",
            "label": "DHSVM模型_伊利诺伊河流域"
        },
        {
            "id": "1561376",
            "name": "流域",
            "label": "伊利诺伊河流域"
        },
        {
            "id": "1559123",
            "name": "模型区域",
            "label": "HIMS模型_昭觉河流域"
        },
        {
            "id": "1561220",
            "name": "流域",
            "label": "昭觉河流域"
        },
        {
            "id": "1559125",
            "name": "模型区域",
            "label": "SWAT模型_恩库西河流域"
        },
        {
            "id": "1561443",
            "name": "流域",
            "label": "恩库西河流域"
        },
        {
            "id": "1559127",
            "name": "模型区域",
            "label": "月水量平衡模型_珠江流域"
        },
        {
            "id": "4",
            "name": "流域",
            "label": "珠江流域"
        },
        {
            "id": "1559128",
            "name": "模型区域",
            "label": "BTOPMC模型_石亭江流域"
        },
        {
            "id": "1555708",
            "name": "流域",
            "label": "石亭江流域"
        },
        {
            "id": "1559129",
            "name": "模型区域",
            "label": "PDM模型_淮河流域"
        },
        {
            "id": "5",
            "name": "流域",
            "label": "淮河流域"
        },
        {
            "id": "1559130",
            "name": "模型区域",
            "label": "月水量平衡模型_黄河流域"
        },
        {
            "id": "1",
            "name": "流域",
            "label": "黄河流域"
        },
        {
            "id": "1559133",
            "name": "模型区域",
            "label": "改进的SWAT模型_扎龙湿地"
        },
        {
            "id": "1561416",
            "name": "流域",
            "label": "扎龙湿地"
        },
        {
            "id": "1559140",
            "name": "模型区域",
            "label": "东江流域的径流模拟模型_东江流域"
        },
        {
            "id": "1553869",
            "name": "流域",
            "label": "东江流域"
        },
        {
            "id": "1559143",
            "name": "模型区域",
            "label": "SWAT模型_密赛流域"
        },
        {
            "id": "1561477",
            "name": "流域",
            "label": "密赛流域"
        },
        {
            "id": "1559148",
            "name": "模型区域",
            "label": "BTOPMC模型_李子溪流域"
        },
        {
            "id": "1561209",
            "name": "流域",
            "label": "李子溪流域"
        },
        {
            "id": "976743",
            "name": "模型区域",
            "label": "SWAT模型_新盖房水文站"
        },
        {
            "id": "42",
            "name": "水文站点",
            "label": "新盖房水文站"
        },
        {
            "id": "976760",
            "name": "模型区域",
            "label": "SWAT模型_唐乃亥水文站"
        },
        {
            "id": "1563823",
            "name": "水文站点",
            "label": "唐乃亥水文站"
        },
        {
            "id": "1553512",
            "name": "模型区域",
            "label": "SWAT模型_紫荆关水文站"
        },
        {
            "id": "1563609",
            "name": "水文站点",
            "label": "紫荆关水文站"
        },
        {
            "id": "1559136",
            "name": "模型区域",
            "label": "VIC模型_唐乃亥站"
        },
        {
            "id": "1559252",
            "name": "水文站点",
            "label": "唐乃亥站"
        },
        {
            "id": "1559146",
            "name": "模型区域",
            "label": "SWAT模型_娄家村水文站"
        },
        {
            "id": "1559284",
            "name": "水文站点",
            "label": "娄家村水文站"
        },
        {
            "id": "1559151",
            "name": "模型区域",
            "label": "条件亚正态分布模型_王家坝水文站"
        },
        {
            "id": "74",
            "name": "水文站点",
            "label": "王家坝水文站"
        },
        {
            "id": "1559153",
            "name": "模型区域",
            "label": "GISMOD模型_莺落峡水文站"
        },
        {
            "id": "1563505",
            "name": "水文站点",
            "label": "莺落峡水文站"
        },
        {
            "id": "1559159",
            "name": "模型区域",
            "label": "SWAT模型_焉耆水文站"
        },
        {
            "id": "1559296",
            "name": "水文站点",
            "label": "焉耆水文站"
        },
        {
            "id": "1559172",
            "name": "模型区域",
            "label": "S-W模型_莺落峡水文站"
        },
        {
            "id": "1563505",
            "name": "水文站点",
            "label": "莺落峡水文站"
        },
        {
            "id": "1559191",
            "name": "模型区域",
            "label": "SWAT模型_沙河闸水文站"
        },
        {
            "id": "1559119",
            "name": "水文站点",
            "label": "沙河闸水文站"
        },
        {
            "id": "1559208",
            "name": "模型区域",
            "label": "MC模型_龙门水文站"
        },
        {
            "id": "1559517",
            "name": "水文站点",
            "label": "龙门水文站"
        },
        {
            "id": "1559209",
            "name": "模型区域",
            "label": "SWAT模型_大城子水文站"
        },
        {
            "id": "1559519",
            "name": "水文站点",
            "label": "大城子水文站"
        },
        {
            "id": "1559225",
            "name": "模型区域",
            "label": "VIC模型_漳河观台站"
        },
        {
            "id": "1559321",
            "name": "水文站点",
            "label": "漳河观台站"
        },
        {
            "id": "1559235",
            "name": "模型区域",
            "label": "SWIM水文模型_王家坝站"
        },
        {
            "id": "65",
            "name": "水文站点",
            "label": "王家坝站"
        },
        {
            "id": "1559246",
            "name": "模型区域",
            "label": "改进的SWAT模型_滨洲线出口流量监测站"
        },
        {
            "id": "1563749",
            "name": "水文站点",
            "label": "滨洲线出口流量监测站"
        },
        {
            "id": "1559256",
            "name": "模型区域",
            "label": "SWAT模型_沙里寨水文站"
        },
        {
            "id": "1559348",
            "name": "水文站点",
            "label": "沙里寨水文站"
        },
        {
            "id": "1559267",
            "name": "模型区域",
            "label": "SWAT模型_龙安桥站"
        },
        {
            "id": "1559426",
            "name": "水文站点",
            "label": "龙安桥站"
        },
        {
            "id": "1559285",
            "name": "模型区域",
            "label": "SWAT模型_李家渡水文站"
        },
        {
            "id": "1559234",
            "name": "水文站点",
            "label": "李家渡水文站"
        },
        {
            "id": "1559292",
            "name": "模型区域",
            "label": "SWAT模型_息县水文站"
        },
        {
            "id": "1559394",
            "name": "水文站点",
            "label": "息县水文站"
        },
        {
            "id": "1559293",
            "name": "模型区域",
            "label": "GeoSFM模型_拉萨水文站"
        },
        {
            "id": "1559456",
            "name": "水文站点",
            "label": "拉萨水文站"
        },
        {
            "id": "1559294",
            "name": "模型区域",
            "label": "MC模型_白马寺水文站"
        },
        {
            "id": "1559398",
            "name": "水文站点",
            "label": "白马寺水文站"
        },
        {
            "id": "72",
            "name": "模型实体",
            "label": "EasyDHM模型"
        },
        {
            "id": "1563826",
            "name": "模型区域",
            "label": "EasyDHM模型_增江流域"
        },
        {
            "id": "75",
            "name": "模型实体",
            "label": "条件亚正态分布模型"
        },
        {
            "id": "1559151",
            "name": "模型区域",
            "label": "条件亚正态分布模型_王家坝水文站"
        },
        {
            "id": "75",
            "name": "模型实体",
            "label": "条件亚正态分布模型"
        },
        {
            "id": "1563331",
            "name": "模型区域",
            "label": "条件亚正态分布模型_淮河流域"
        },
        {
            "id": "63084",
            "name": "模型实体",
            "label": "改进图论与水文模拟方法的河网水系连通性评价模型"
        },
        {
            "id": "1563837",
            "name": "模型区域",
            "label": "改进图论与水文模拟方法的河网水系连通性评价模型_秦淮河流域"
        },
        {
            "id": "1559109",
            "name": "模型实体",
            "label": "S-W模型"
        },
        {
            "id": "1559172",
            "name": "模型区域",
            "label": "S-W模型_莺落峡水文站"
        },
        {
            "id": "1559109",
            "name": "模型实体",
            "label": "S-W模型"
        },
        {
            "id": "47",
            "name": "模型区域",
            "label": "S-W模型_黑河流域"
        },
        {
            "id": "1559112",
            "name": "模型实体",
            "label": "SCS模型"
        },
        {
            "id": "1559388",
            "name": "模型区域",
            "label": "SCS模型_雅砻江流域"
        },
        {
            "id": "1559112",
            "name": "模型实体",
            "label": "SCS模型"
        },
        {
            "id": "76",
            "name": "模型区域",
            "label": "SCS模型_黑林流域"
        },
        {
            "id": "1559117",
            "name": "模型实体",
            "label": "SIMHYD模型"
        },
        {
            "id": "1563791",
            "name": "模型区域",
            "label": "SIMHYD模型_Goulburn流域"
        },
        {
            "id": "1559120",
            "name": "模型实体",
            "label": "耦合模型"
        },
        {
            "id": "1563856",
            "name": "模型区域",
            "label": "耦合模型_青弋江流域"
        },
        {
            "id": "1559142",
            "name": "模型实体",
            "label": "RCCC-WBM模型"
        },
        {
            "id": "1559259",
            "name": "模型区域",
            "label": "RCCC-WBM模型_岚河流域"
        },
        {
            "id": "1559149",
            "name": "模型实体",
            "label": "PDM模型"
        },
        {
            "id": "1563824",
            "name": "模型区域",
            "label": "PDM模型_王家坝站"
        },
        {
            "id": "1559149",
            "name": "模型实体",
            "label": "PDM模型"
        },
        {
            "id": "1559129",
            "name": "模型区域",
            "label": "PDM模型_淮河流域"
        },
        {
            "id": "1559155",
            "name": "模型实体",
            "label": "Topmodel洪水预报模型"
        },
        {
            "id": "1559213",
            "name": "模型区域",
            "label": "Topmodel洪水预报模型_辽宁省中小河流"
        },
        {
            "id": "1559157",
            "name": "模型实体",
            "label": "改进的SWAT模型"
        },
        {
            "id": "1559898",
            "name": "模型区域",
            "label": "改进的SWAT模型_塔河水文站"
        },
        {
            "id": "1559157",
            "name": "模型实体",
            "label": "改进的SWAT模型"
        },
        {
            "id": "1559912",
            "name": "模型区域",
            "label": "改进的SWAT模型_塔河流域"
        },
        {
            "id": "1559157",
            "name": "模型实体",
            "label": "改进的SWAT模型"
        },
        {
            "id": "1559246",
            "name": "模型区域",
            "label": "改进的SWAT模型_滨洲线出口流量监测站"
        },
        {
            "id": "1559157",
            "name": "模型实体",
            "label": "改进的SWAT模型"
        },
        {
            "id": "1559133",
            "name": "模型区域",
            "label": "改进的SWAT模型_扎龙湿地"
        },
        {
            "id": "1559164",
            "name": "模型实体",
            "label": "东江流域的径流模拟模型"
        },
        {
            "id": "1559349",
            "name": "模型区域",
            "label": "东江流域的径流模拟模型_博罗站"
        },
        {
            "id": "1559164",
            "name": "模型实体",
            "label": "东江流域的径流模拟模型"
        },
        {
            "id": "1559140",
            "name": "模型区域",
            "label": "东江流域的径流模拟模型_东江流域"
        },
        {
            "id": "1559170",
            "name": "模型实体",
            "label": "煤矿采空区特殊下垫面水文模型"
        },
        {
            "id": "976762",
            "name": "模型区域",
            "label": "煤矿采空区特殊下垫面水文模型_汾河水库流域"
        },
        {
            "id": "976743",
            "name": "模型区域",
            "label": "SWAT模型_新盖房水文站"
        },
        {
            "id": "976744",
            "name": "模型区域时间",
            "label": "SWAT模型_新盖房水文站_1966～1974年"
        },
        {
            "id": "976743",
            "name": "模型区域",
            "label": "SWAT模型_新盖房水文站"
        },
        {
            "id": "739596",
            "name": "模型区域时间",
            "label": "SWAT模型_新盖房水文站_2006～2015年"
        },
        {
            "id": "976743",
            "name": "模型区域",
            "label": "SWAT模型_新盖房水文站"
        },
        {
            "id": "1563835",
            "name": "模型区域时间",
            "label": "SWAT模型_新盖房水文站_1975～2015年"
        },
        {
            "id": "976760",
            "name": "模型区域",
            "label": "SWAT模型_唐乃亥水文站"
        },
        {
            "id": "1559714",
            "name": "模型区域时间",
            "label": "SWAT模型_唐乃亥水文站_1982～1986年"
        },
        {
            "id": "976760",
            "name": "模型区域",
            "label": "SWAT模型_唐乃亥水文站"
        },
        {
            "id": "1559820",
            "name": "模型区域时间",
            "label": "SWAT模型_唐乃亥水文站_1977～1981年"
        },
        {
            "id": "976760",
            "name": "模型区域",
            "label": "SWAT模型_唐乃亥水文站"
        },
        {
            "id": "1559839",
            "name": "模型区域时间",
            "label": "SWAT模型_唐乃亥水文站_1960～2010年"
        },
        {
            "id": "976760",
            "name": "模型区域",
            "label": "SWAT模型_唐乃亥水文站"
        },
        {
            "id": "1563335",
            "name": "模型区域时间",
            "label": "SWAT模型_唐乃亥水文站_2001～2012年"
        },
        {
            "id": "976760",
            "name": "模型区域",
            "label": "SWAT模型_唐乃亥水文站"
        },
        {
            "id": "1559175",
            "name": "模型区域时间",
            "label": "SWAT模型_唐乃亥水文站_1975～2000年"
        },
        {
            "id": "976760",
            "name": "模型区域",
            "label": "SWAT模型_唐乃亥水文站"
        },
        {
            "id": "80",
            "name": "模型区域时间",
            "label": "SWAT模型_唐乃亥水文站_2000～2012年"
        },
        {
            "id": "976760",
            "name": "模型区域",
            "label": "SWAT模型_唐乃亥水文站"
        },
        {
            "id": "1559115",
            "name": "模型区域时间",
            "label": "SWAT模型_唐乃亥水文站_1970～1975年"
        },
        {
            "id": "976760",
            "name": "模型区域",
            "label": "SWAT模型_唐乃亥水文站"
        },
        {
            "id": "1563790",
            "name": "模型区域时间",
            "label": "SWAT模型_唐乃亥水文站_1970～2012年"
        },
        {
            "id": "976760",
            "name": "模型区域",
            "label": "SWAT模型_唐乃亥水文站"
        },
        {
            "id": "1559152",
            "name": "模型区域时间",
            "label": "SWAT模型_唐乃亥水文站_1975～2012年"
        },
        {
            "id": "976760",
            "name": "模型区域",
            "label": "SWAT模型_唐乃亥水文站"
        },
        {
            "id": "1559168",
            "name": "模型区域时间",
            "label": "SWAT模型_唐乃亥水文站_1985～1987年"
        },
        {
            "id": "976760",
            "name": "模型区域",
            "label": "SWAT模型_唐乃亥水文站"
        },
        {
            "id": "976761",
            "name": "模型区域时间",
            "label": "SWAT模型_唐乃亥水文站_1977～1979年"
        },
        {
            "id": "976760",
            "name": "模型区域",
            "label": "SWAT模型_唐乃亥水文站"
        },
        {
            "id": "46",
            "name": "模型区域时间",
            "label": "SWAT模型_唐乃亥水文站_1977～1995年"
        },
        {
            "id": "976760",
            "name": "模型区域",
            "label": "SWAT模型_唐乃亥水文站"
        },
        {
            "id": "64",
            "name": "模型区域时间",
            "label": "SWAT模型_唐乃亥水文站_1995～1997年"
        },
        {
            "id": "1553512",
            "name": "模型区域",
            "label": "SWAT模型_紫荆关水文站"
        },
        {
            "id": "1553543",
            "name": "模型区域时间",
            "label": "SWAT模型_紫荆关水文站_1966～1974年"
        },
        {
            "id": "1553512",
            "name": "模型区域",
            "label": "SWAT模型_紫荆关水文站"
        },
        {
            "id": "1563812",
            "name": "模型区域时间",
            "label": "SWAT模型_紫荆关水文站_2006～2015年"
        },
        {
            "id": "1553512",
            "name": "模型区域",
            "label": "SWAT模型_紫荆关水文站"
        },
        {
            "id": "1559126",
            "name": "模型区域时间",
            "label": "SWAT模型_紫荆关水文站_1975～2015年"
        },
        {
            "id": "1559136",
            "name": "模型区域",
            "label": "VIC模型_唐乃亥站"
        },
        {
            "id": "1559299",
            "name": "模型区域时间",
            "label": "VIC模型_唐乃亥站_2011～2050年"
        },
        {
            "id": "1559136",
            "name": "模型区域",
            "label": "VIC模型_唐乃亥站"
        },
        {
            "id": "1559162",
            "name": "模型区域时间",
            "label": "VIC模型_唐乃亥站_1971～2010年"
        },
        {
            "id": "46",
            "name": "模型区域时间",
            "label": "SWAT模型_唐乃亥水文站_1977～1995年"
        },
        {
            "id": "1022874",
            "name": "人员",
            "label": "刘庆"
        },
        {
            "id": "48",
            "name": "模型区域时间",
            "label": "S-W模型_莺落峡水文站_2000～2003年"
        },
        {
            "id": "965032",
            "name": "人员",
            "label": "赵捷"
        },
        {
            "id": "64",
            "name": "模型区域时间",
            "label": "SWAT模型_唐乃亥水文站_1995～1997年"
        },
        {
            "id": "1022874",
            "name": "人员",
            "label": "刘庆"
        },
        {
            "id": "80",
            "name": "模型区域时间",
            "label": "SWAT模型_唐乃亥水文站_2000～2012年"
        },
        {
            "id": "1556000",
            "name": "人员",
            "label": "田明珠"
        },
        {
            "id": "63029",
            "name": "模型区域时间",
            "label": "VIC模型_兰州站_2011～2050年"
        },
        {
            "id": "999028",
            "name": "人员",
            "label": "魏洁"
        },
        {
            "id": "739373",
            "name": "模型区域时间",
            "label": "SWAT模型_北郭村水文站 _1975～2015年"
        },
        {
            "id": "1555601",
            "name": "人员",
            "label": "张学知"
        },
        {
            "id": "739596",
            "name": "模型区域时间",
            "label": "SWAT模型_新盖房水文站_2006～2015年"
        },
        {
            "id": "1555601",
            "name": "人员",
            "label": "张学知"
        },
        {
            "id": "976664",
            "name": "模型区域时间",
            "label": "VIC模型_唐乃亥站_2021～2050年"
        },
        {
            "id": "999028",
            "name": "人员",
            "label": "魏洁"
        },
        {
            "id": "976666",
            "name": "模型区域时间",
            "label": "VIC模型_小川站_1991～2010年"
        },
        {
            "id": "999028",
            "name": "人员",
            "label": "魏洁"
        },
        {
            "id": "976680",
            "name": "模型区域时间",
            "label": "VIC模型_漳河观台站_1956～1979年"
        },
        {
            "id": "977654",
            "name": "人员",
            "label": "范辉"
        },
        {
            "id": "976681",
            "name": "模型区域时间",
            "label": "SWAT模型_沙里寨水文站_2000～2007年"
        },
        {
            "id": "1480138",
            "name": "人员",
            "label": "贾玉娟"
        },
        {
            "id": "976744",
            "name": "模型区域时间",
            "label": "SWAT模型_新盖房水文站_1966～1974年"
        },
        {
            "id": "1555601",
            "name": "人员",
            "label": "张学知"
        },
        {
            "id": "976759",
            "name": "模型区域时间",
            "label": "SWAT模型_北郭村水文站 _2006～2015年"
        },
        {
            "id": "1555601",
            "name": "人员",
            "label": "张学知"
        },
        {
            "id": "976761",
            "name": "模型区域时间",
            "label": "SWAT模型_唐乃亥水文站_1977～1979年"
        },
        {
            "id": "1022874",
            "name": "人员",
            "label": "刘庆"
        },
        {
            "id": "1552509",
            "name": "模型区域时间",
            "label": "两参数月水量平衡模型_张家山站_1982～2006年"
        },
        {
            "id": "57738",
            "name": "人员",
            "label": "熊立华"
        },
        {
            "id": "1552523",
            "name": "模型区域时间",
            "label": "两参数月水量平衡模型_横江站_2000～2006年"
        },
        {
            "id": "57738",
            "name": "人员",
            "label": "熊立华"
        },
        {
            "id": "1553480",
            "name": "模型区域时间",
            "label": "两参数月水量平衡模型_峡江站_1982～2006年"
        },
        {
            "id": "57738",
            "name": "人员",
            "label": "熊立华"
        },
        {
            "id": "1553543",
            "name": "模型区域时间",
            "label": "SWAT模型_紫荆关水文站_1966～1974年"
        },
        {
            "id": "1555601",
            "name": "人员",
            "label": "张学知"
        },
        {
            "id": "1559110",
            "name": "模型区域时间",
            "label": "S-W模型_莺落峡水文站_1996～1999年"
        },
        {
            "id": "965032",
            "name": "人员",
            "label": "赵捷"
        },
        {
            "id": "1559115",
            "name": "模型区域时间",
            "label": "SWAT模型_唐乃亥水文站_1970～1975年"
        },
        {
            "id": "1556000",
            "name": "人员",
            "label": "田明珠"
        },
        {
            "id": "1559124",
            "name": "模型区域时间",
            "label": "径流和积雪资料的水文模型_奴下水文站_2001～2014年"
        },
        {
            "id": "1530804",
            "name": "人员",
            "label": "何柯琪"
        },
        {
            "id": "1559157",
            "name": "模型实体",
            "label": "改进的SWAT模型"
        },
        {
            "id": "1561323",
            "name": "模型实体",
            "label": "SWAT模型"
        },
        {
            "id": "1559164",
            "name": "模型实体",
            "label": "东江流域的径流模拟模型"
        },
        {
            "id": "1559228",
            "name": "模型实体",
            "label": "HSPF模型"
        },
        {
            "id": "1559312",
            "name": "模型实体",
            "label": "流域水文模型"
        },
        {
            "id": "1559578",
            "name": "模型实体",
            "label": "GLUE模型"
        },
        {
            "id": "1559396",
            "name": "模型实体",
            "label": "溶蚀丘陵型岩溶流域概念性水文模型"
        },
        {
            "id": "1563397",
            "name": "模型实体",
            "label": "新安江模型"
        },
        {
            "id": "1559752",
            "name": "模型实体",
            "label": "西营河流域模型"
        },
        {
            "id": "1561323",
            "name": "模型实体",
            "label": "SWAT模型"
        },
        {
            "id": "1560025",
            "name": "模型实体",
            "label": "栅格的分布式新安江模型"
        },
        {
            "id": "1563397",
            "name": "模型实体",
            "label": "新安江模型"
        },
        {
            "id": "1560144",
            "name": "模型实体",
            "label": "基于Morris法的HBV模型"
        },
        {
            "id": "1561189",
            "name": "模型实体",
            "label": "HBV模型"
        },
        {
            "id": "1560536",
            "name": "模型实体",
            "label": "格子玻尔兹曼法的TOPMODEL模型"
        },
        {
            "id": "1563779",
            "name": "模型实体",
            "label": "TOPMODE模型"
        },
        {
            "id": "1560596",
            "name": "模型实体",
            "label": "人机联合优化的SWAT模型"
        },
        {
            "id": "1561323",
            "name": "模型实体",
            "label": "SWAT模型"
        },
        {
            "id": "1561329",
            "name": "模型实体",
            "label": "SWMM模型"
        },
        {
            "id": "1561329",
            "name": "模型实体",
            "label": "SWMM模型"
        },
        {
            "id": "1561395",
            "name": "模型实体",
            "label": "耦合机器学习模型"
        },
        {
            "id": "1560681",
            "name": "模型实体",
            "label": "ANN模型"
        },
        {
            "id": "1561484",
            "name": "模型实体",
            "label": "多目标GLUE算法的新安江模型"
        },
        {
            "id": "1563397",
            "name": "模型实体",
            "label": "新安江模型"
        },
        {
            "id": "1563244",
            "name": "模型实体",
            "label": "TOPMODEL的中小河流分布式洪水预报模型"
        },
        {
            "id": "1563437",
            "name": "模型实体",
            "label": "TOPMODEL模型"
        },
        {
            "id": "1563802",
            "name": "模型实体",
            "label": "改进SWAT模型水库模块"
        },
        {
            "id": "1561323",
            "name": "模型实体",
            "label": "SWAT模型"
        }
    ],
    edges: [
        {
            "source": "9376",
            "target": "59337"
        },
        {
            "source": "9376",
            "target": "1065306"
        },
        {
            "source": "9377",
            "target": "887183"
        },
        {
            "source": "9377",
            "target": "1063694"
        },
        {
            "source": "9377",
            "target": "1108848"
        },
        {
            "source": "9377",
            "target": "1262692"
        },
        {
            "source": "9377",
            "target": "1271604"
        },
        {
            "source": "9377",
            "target": "1287785"
        },
        {
            "source": "9377",
            "target": "1287802"
        },
        {
            "source": "9377",
            "target": "1294936"
        },
        {
            "source": "9380",
            "target": "964862"
        },
        {
            "source": "9381",
            "target": "884994"
        },
        {
            "source": "9381",
            "target": "1072153"
        },
        {
            "source": "9381",
            "target": "1081109"
        },
        {
            "source": "9381",
            "target": "1082410"
        },
        {
            "source": "9381",
            "target": "1098214"
        },
        {
            "source": "9381",
            "target": "1102218"
        },
        {
            "source": "9381",
            "target": "1257118"
        },
        {
            "source": "9381",
            "target": "1260236"
        },
        {
            "source": "9381",
            "target": "1263390"
        },
        {
            "source": "9381",
            "target": "1292212"
        },
        {
            "source": "72",
            "target": "57719"
        },
        {
            "source": "72",
            "target": "1052140"
        },
        {
            "source": "75",
            "target": "886606"
        },
        {
            "source": "75",
            "target": "1052011"
        },
        {
            "source": "63084",
            "target": "57584"
        },
        {
            "source": "63084",
            "target": "988896"
        },
        {
            "source": "1559109",
            "target": "886056"
        },
        {
            "source": "1559109",
            "target": "965032"
        },
        {
            "source": "1559112",
            "target": "1067268"
        },
        {
            "source": "1559112",
            "target": "1492149"
        },
        {
            "source": "1559112",
            "target": "8954"
        },
        {
            "source": "1559112",
            "target": "1555956"
        },
        {
            "source": "1559117",
            "target": "1556044"
        },
        {
            "source": "1559117",
            "target": "1556043"
        },
        {
            "source": "1559117",
            "target": "59485"
        },
        {
            "source": "1559117",
            "target": "1509289"
        },
        {
            "source": "1559120",
            "target": "885384"
        },
        {
            "source": "1559120",
            "target": "885419"
        },
        {
            "source": "1559142",
            "target": "1556101"
        },
        {
            "source": "1559142",
            "target": "964871"
        },
        {
            "source": "1559149",
            "target": "1555638"
        },
        {
            "source": "45",
            "target": "1555618"
        },
        {
            "source": "47",
            "target": "1553709"
        },
        {
            "source": "73",
            "target": "1561365"
        },
        {
            "source": "76",
            "target": "1561354"
        },
        {
            "source": "63208",
            "target": "1561196"
        },
        {
            "source": "976742",
            "target": "1561325"
        },
        {
            "source": "976762",
            "target": "1555865"
        },
        {
            "source": "1552460",
            "target": "1553673"
        },
        {
            "source": "1559113",
            "target": "1555966"
        },
        {
            "source": "1559116",
            "target": "1553709"
        },
        {
            "source": "1559118",
            "target": "1561376"
        },
        {
            "source": "1559123",
            "target": "1561220"
        },
        {
            "source": "1559125",
            "target": "1561443"
        },
        {
            "source": "1559127",
            "target": "4"
        },
        {
            "source": "1559128",
            "target": "1555708"
        },
        {
            "source": "1559129",
            "target": "5"
        },
        {
            "source": "1559130",
            "target": "1"
        },
        {
            "source": "1559133",
            "target": "1561416"
        },
        {
            "source": "1559140",
            "target": "1553869"
        },
        {
            "source": "1559143",
            "target": "1561477"
        },
        {
            "source": "1559148",
            "target": "1561209"
        },
        {
            "source": "976743",
            "target": "42"
        },
        {
            "source": "976760",
            "target": "1563823"
        },
        {
            "source": "1553512",
            "target": "1563609"
        },
        {
            "source": "1559136",
            "target": "1559252"
        },
        {
            "source": "1559146",
            "target": "1559284"
        },
        {
            "source": "1559151",
            "target": "74"
        },
        {
            "source": "1559153",
            "target": "1563505"
        },
        {
            "source": "1559159",
            "target": "1559296"
        },
        {
            "source": "1559172",
            "target": "1563505"
        },
        {
            "source": "1559191",
            "target": "1559119"
        },
        {
            "source": "1559208",
            "target": "1559517"
        },
        {
            "source": "1559209",
            "target": "1559519"
        },
        {
            "source": "1559225",
            "target": "1559321"
        },
        {
            "source": "1559235",
            "target": "65"
        },
        {
            "source": "1559246",
            "target": "1563749"
        },
        {
            "source": "1559256",
            "target": "1559348"
        },
        {
            "source": "1559267",
            "target": "1559426"
        },
        {
            "source": "1559285",
            "target": "1559234"
        },
        {
            "source": "1559292",
            "target": "1559394"
        },
        {
            "source": "1559293",
            "target": "1559456"
        },
        {
            "source": "1559294",
            "target": "1559398"
        },
        {
            "source": "72",
            "target": "1563826"
        },
        {
            "source": "75",
            "target": "1559151"
        },
        {
            "source": "75",
            "target": "1563331"
        },
        {
            "source": "63084",
            "target": "1563837"
        },
        {
            "source": "1559109",
            "target": "1559172"
        },
        {
            "source": "1559109",
            "target": "47"
        },
        {
            "source": "1559112",
            "target": "1559388"
        },
        {
            "source": "1559112",
            "target": "76"
        },
        {
            "source": "1559117",
            "target": "1563791"
        },
        {
            "source": "1559120",
            "target": "1563856"
        },
        {
            "source": "1559142",
            "target": "1559259"
        },
        {
            "source": "1559149",
            "target": "1563824"
        },
        {
            "source": "1559149",
            "target": "1559129"
        },
        {
            "source": "1559155",
            "target": "1559213"
        },
        {
            "source": "1559157",
            "target": "1559898"
        },
        {
            "source": "1559157",
            "target": "1559912"
        },
        {
            "source": "1559157",
            "target": "1559246"
        },
        {
            "source": "1559157",
            "target": "1559133"
        },
        {
            "source": "1559164",
            "target": "1559349"
        },
        {
            "source": "1559164",
            "target": "1559140"
        },
        {
            "source": "1559170",
            "target": "976762"
        },
        {
            "source": "976743",
            "target": "976744"
        },
        {
            "source": "976743",
            "target": "739596"
        },
        {
            "source": "976743",
            "target": "1563835"
        },
        {
            "source": "976760",
            "target": "1559714"
        },
        {
            "source": "976760",
            "target": "1559820"
        },
        {
            "source": "976760",
            "target": "1559839"
        },
        {
            "source": "976760",
            "target": "1563335"
        },
        {
            "source": "976760",
            "target": "1559175"
        },
        {
            "source": "976760",
            "target": "80"
        },
        {
            "source": "976760",
            "target": "1559115"
        },
        {
            "source": "976760",
            "target": "1563790"
        },
        {
            "source": "976760",
            "target": "1559152"
        },
        {
            "source": "976760",
            "target": "1559168"
        },
        {
            "source": "976760",
            "target": "976761"
        },
        {
            "source": "976760",
            "target": "46"
        },
        {
            "source": "976760",
            "target": "64"
        },
        {
            "source": "1553512",
            "target": "1553543"
        },
        {
            "source": "1553512",
            "target": "1563812"
        },
        {
            "source": "1553512",
            "target": "1559126"
        },
        {
            "source": "1559136",
            "target": "1559299"
        },
        {
            "source": "1559136",
            "target": "1559162"
        },
        {
            "source": "46",
            "target": "1022874"
        },
        {
            "source": "48",
            "target": "965032"
        },
        {
            "source": "64",
            "target": "1022874"
        },
        {
            "source": "80",
            "target": "1556000"
        },
        {
            "source": "63029",
            "target": "999028"
        },
        {
            "source": "739373",
            "target": "1555601"
        },
        {
            "source": "739596",
            "target": "1555601"
        },
        {
            "source": "976664",
            "target": "999028"
        },
        {
            "source": "976666",
            "target": "999028"
        },
        {
            "source": "976680",
            "target": "977654"
        },
        {
            "source": "976681",
            "target": "1480138"
        },
        {
            "source": "976744",
            "target": "1555601"
        },
        {
            "source": "976759",
            "target": "1555601"
        },
        {
            "source": "976761",
            "target": "1022874"
        },
        {
            "source": "1552509",
            "target": "57738"
        },
        {
            "source": "1552523",
            "target": "57738"
        },
        {
            "source": "1553480",
            "target": "57738"
        },
        {
            "source": "1553543",
            "target": "1555601"
        },
        {
            "source": "1559110",
            "target": "965032"
        },
        {
            "source": "1559115",
            "target": "1556000"
        },
        {
            "source": "1559124",
            "target": "1530804"
        },
        {
            "source": "1559157",
            "target": "1561323"
        },
        {
            "source": "1559164",
            "target": "1559228"
        },
        {
            "source": "1559312",
            "target": "1559578"
        },
        {
            "source": "1559396",
            "target": "1563397"
        },
        {
            "source": "1559752",
            "target": "1561323"
        },
        {
            "source": "1560025",
            "target": "1563397"
        },
        {
            "source": "1560144",
            "target": "1561189"
        },
        {
            "source": "1560536",
            "target": "1563779"
        },
        {
            "source": "1560596",
            "target": "1561323"
        },
        {
            "source": "1561329",
            "target": "1561329"
        },
        {
            "source": "1561395",
            "target": "1560681"
        },
        {
            "source": "1561484",
            "target": "1563397"
        },
        {
            "source": "1563244",
            "target": "1563437"
        },
        {
            "source": "1563802",
            "target": "1561323"
        }
    ],
};
onMounted(() => {
    const container = document.querySelector(".graph-container");
    console.log(container)
    const width = container.scrollWidth;
    const height = container.scrollHeight || 500;
    const graph = new G6.Graph({
        container: container,
        width,
        height,
        modes: {
            default: ['drag-canvas', 'drag-node', 'zoom-canvas'],
        },
        animate: true,
        defaultNode: {
            size: 40,
            style: {
                lineWidth: 2,
                stroke: '#5B8FF9',
                fill: '#C6E5FF',
            },
            labelCfg: {
            offset: 10,
            position: "bottom"
        },
        },
        defaultEdge: {
            size: 1,
            color: '#999',
            style: {
                endArrow: {
                    path: 'M 0,0 L 8,4 L 8,-4 Z',
                    fill: '#999',
                },
            },
        },
        layout: {
            type: 'gForce',
            gravity: 5,
            linkDistance: 80,
            //preventOverlap: true,
            maxIteration: 200,
            gatherDiscrete: true,
            //nodeSize: 100,
            //nodeSpacing: 100,
            //gatherDiscreteCenter: [500, 100],
            descreteGravity: 400,
            linkDistanceFunc: (e) => {
                if (e.source === '0') return 10;
                return 1;
            },
            getMass: (d) => {
                if (d.id === '0') return 100;
                return 1;
            },
        },
    });

    graph.data(data);
    graph.render();

    if (typeof window !== 'undefined')
        window.onresize = () => {
            if (!graph || graph.get('destroyed')) return;
            if (!container || !container.scrollWidth || !container.scrollHeight) return;
            graph.changeSize(container.scrollWidth, container.scrollHeight);
        };

})



</script>
    
<style lang="scss" scoped></style>
<style lang="scss"></style>